<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-18 09:34:22
 * @LastEditTime: 2023-11-15 16:33:15
-->
<template>
    <div class="receive1">
        <div class="receive2" v-if="!hasTransaction">
            <div>
                <span style="font-weight: 700;">{{ $t('text.Contract.l127') }}</span>
                <span class="tag1">{{ $t('text.Contract.l186') }}</span>
            </div>
            <div></div>
        </div>

        <div class="receive2" v-if="hasTransaction">
            <div>
                <span style="font-weight: 700;">{{ $t('text.Contract.l127') }}</span>
                <span :class="planData.status == '1' ? 'tag2' : 'tag3'">{{ planData.status == '1' ? $t('text.Contract.l213') :
                    $t('text.Contract.l63') }}</span>
            </div>
            <div style="display: flex;">
                <DialogLayout48 :ids="{ ids: ids, planId: planData.planId, signUserName: ids.signUserName }" isChange
                    @returnData="getData">
                    <el-button round style="height: 28px;color: #6698ff;border: 1px solid #6698ff;margin-right: 20px;">
                        {{ $t('text.Contract.l215') }}
                    </el-button>
                </DialogLayout48>
                <DialogLayout47 :planId="planData.planId" :signUserName="planData.sysUserName"
                    :templateId="planData.templateId" :title="planData.templateName"
                    :paramsSteps="planData.steps.filter(v => v.isEmpty !== true)" isChangeEdit @returnData="getData">
                    <el-button round style="height: 28px;color: #6698ff;border: 1px solid #6698ff;">
                        {{ $t('text.Contract.l216') }}
                    </el-button>
                </DialogLayout47>
            </div>
        </div>

        <div class="receive4" v-if="!hasTransaction">
            <DialogLayout48 :ids="{ ids: ids, planId: planData.planId, signUserName: ids.signUserName }"
                @returnData="getData">
                <div class="receive5">{{ $t('text.Contract.l187') }}</div>
                <div class="receive6">+{{ $t('text.Contract.l188') }}</div>
            </DialogLayout48>
        </div>

        <div class="receive7" v-if="hasTransaction">
            <div class="receive8">{{ planData.templateName }}</div>
            <div class="receive9">{{ $t('text.Contract.l214') }}:&ensp;<span class="receive10">{{ planData.sysUserName
            }}</span></div>

            <!--流程卡片-->
            <div class="receive11">
                <div class="receive12" style="text-align: left;left: 0;" @click="handleStepArrowClick('left')">＜</div>
                <div class="receive14">
                    <div class="receice15" v-for="(item, index) of planData.steps" :key="item">
                        <!--步骤点-->
                        <div class="dotNumber"
                            :style="item.isFirst ? { background: '#FFBE21' } : item.completeTime == null ? {} : { background: '#54d2d0' }">
                            {{ index + 1 }}</div>
                        <!--卡片-->
                        <div class="card" v-if="!item.isEmpty"
                            :style="item.completeTime != null ? { background: 'linear-gradient(45deg, #0cb0b014,#54d2d03d, #54d2d017)', border: '2px solid #54d2d0' }
                                : item.isFirst ? { background: 'linear-gradient(45deg, #e8eeff, #c4d1ffc9, #e8eeff)', border: '2px solid #6698FF' } : {}">
                            <div class="card1">{{ index + 1 }}.{{ item.name }}</div>

                            <div class="card2">
                                <CommonOmit :text="item.notes"></CommonOmit>
                            </div>

                            <div class="card3" v-if="item.mode == '1'">
                                {{ $t('text.Contract.l217') }}:&ensp;
                                {{ $t('text.DialogLayout.l297') }}&ensp;{{ item.frontDay }}&ensp;{{
                                    $t('text.DialogLayout.l298') }}
                            </div>
                            <div class="card3" v-else>{{ $t('text.Contract.l217') }}:&ensp;{{ item.planTime }}</div>
                            <div class="card4">{{ $t('text.Contract.l218') }}:&ensp;{{ item.completeTime==null?'-':item.completeTime }}</div>
                            <div class="card5" v-if="item.completeTime == null"
                                :style="item.isFirst ? { background: '#6698FF', border: '2px solid #6698FF' } : {}">
                                <div v-if="item.isFirst">
                                    <DialogLayout62 isEdit :params="item" :planId="planData.planId" @returnData="getData">{{
                                        $t('text.Contract.l219') }}</DialogLayout62>
                                </div>
                                <div v-else>{{ $t('text.Contract.l221') }}</div>
                            </div>
                            <div class="card6" v-if="item.completeTime != null">
                                <DialogLayout62 :params="item" :planId="planData.planId" @returnData="getData">{{
                                    $t('text.Contract.l222') }}</DialogLayout62>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="receive12" style="text-align: right;right: 0;" @click="handleStepArrowClick('right')">＞</div>
            </div>

        </div>

    </div>
</template>
    
<script>
import CommonOmit from '@/components/input/CommonOmit.vue'
import { findPlanByContractId } from '../../http/api'
import DialogLayout62 from '@/components/dialogLayout/DialogLayout62.vue'
export default {
    name: "TransactionProgress",
    props: {
        ids: {
            default: {}
        }
    },
    components: {
        CommonOmit,
        DialogLayout62
    },
    data() {
        return {
            hasTransaction: false,
            planData: {},
            translateX: 0
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            findPlanByContractId({ contractId: this.ids.id }).then(res => {
                if (res !== undefined && res != null) {
                    let isFirst = true
                    res.steps?.forEach((step, index) => {
                        if (step.mode === '1') {
                            step.time = this.addDays(res.steps[index - 1].time, step.frontDay, false)
                        } else {
                            step.time = this.addDays(step.planTime, 0, true)
                        }
                        if (isFirst && step.completeTime == null) {
                            step.isFirst = true
                            isFirst = false
                        }
                    });
                    if (res.steps && res.steps?.length < 10) {
                        const diff = 8 - res.steps.length;
                        for (let i = 0; i < diff; i++) {
                            res.steps.push({
                                isEmpty: true
                            });
                        }
                    }
                    this.planData = res
                    if (res.status == '1' || res.status == '2') {
                        this.hasTransaction = true
                    } else {
                        this.hasTransaction = false
                    }
                    console.log(this.planData)
                }
            }).catch()
        },
        handleStepArrowClick(direction) {
            const receive14 = document.querySelector('.receive14');
            if (direction === 'left') {
                // 向左平移
                this.translateX += 220;
                if (this.translateX > 0) {
                    this.translateX = 0
                }
            } else if (direction === 'right') {
                // 向右平移
                if (Math.abs(this.translateX / 220) <= this.planData.steps?.length - 4) {
                    console.log(Math.abs(this.translateX / 220))
                    this.translateX -= 220;
                }

            }
            // 设置新的 transform 值
            receive14.style.transform = `translateX(${this.translateX}px)`;
        },
        addDays(dateStr, days, isConvert) {
            let date = ''
            if (isConvert) {
                date = new Date(this.convertDateFormat(dateStr))
            } else {
                date = new Date(dateStr)
            }
            if (isNaN(date)) {
                return '';
            }
            const newDate = new Date()
            newDate.setFullYear(date.getFullYear())
            newDate.setMonth(date.getMonth())
            newDate.setDate(date.getDate() + days)
            if (isNaN(newDate)) {
                return '';
            }
            const y = newDate.getFullYear()
            const m = ("0" + (newDate.getMonth() + 1)).slice(-2)
            const d = ("0" + newDate.getDate()).slice(-2)
            return `${y}-${m}-${d}`
        },
        convertDateFormat(dateStr) {
            // 截取日期部分
            const datePart = dateStr.split("/").slice(0, 3);
            // 构造支持的格式
            return datePart[2] + "-" + datePart[1] + "-" + datePart[0];
        }

    },
    watch: {},
    computed: {},
}
</script>

<style scoped>
.dotNumber {
    width: 25px;
    height: 25px;
    background: #cacaca;
    border-radius: 100%;
    line-height: 24px;
    color: white;
    z-index: 1;
}

.blueCard {
    background: linear-gradient(45deg, #e8eeff, #c4d1ffc9, #e8eeff);
    border: 2px solid #6698FF;
}

.card {
    position: absolute;
    top: 40px;
    width: 85%;
    font-size: 12px;
    color: black;
    border-radius: 10px;
    text-align: left;
    border: 2px solid #cacaca;
}

.card1 {
    font-weight: 600;
    padding: 10px;
}

.card2 {
    min-height: 100px;
    color: gray;
    padding: 5px 10px;
    padding-top: 0;
    word-break: break-all;
}

.card3 {
    font-weight: 600;
    padding: 2px 10px;
}

.card4 {
    font-weight: 600;
    padding: 2px 10px;
}

.card5 {
    background: #cacaca;
    padding: 0;
    margin: 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: white;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
}

.card6 {
    padding: 0;
    margin: 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: white;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
    background: #54d2d0;
    border: 2px solid #54d2d0;
}

.receice15 {
    display: flex;
    position: relative;
    justify-content: center;
    min-width: 215px;
}

.receice15::after {
    content: "";
    height: 1px;
    width: 100%;
    background: #dcdcdc;
    position: absolute;
    top: 12px;
}

.receive14 {
    display: flex;
    flex-wrap: nowrap;
    flex: 1;
    height: 100%;
    margin: 0 15px;
    transition: transform 0.3s ease;
}

.receive12 {
    background: #6689ff;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    color: white;
    font-weight: bold;
    line-height: 18px;
    font-size: 18px;
    margin-top: 150px;
    z-index: 20;
    position: absolute;
}

.receive11 {
    display: flex;
    margin: 20px 0;
    align-items: flex-start;
    height: 100%;
    position: relative;
}

.receive10 {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.receive9 {
    text-align: left;
    font-size: 13px;
    padding-top: 5px;
}

.receive8 {
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    padding-top: 15px;
}

.receive7 {
    height: 100%;
}

.tag1 {
    background-color: #cacaca;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: white;
    padding: 2px 5px;
}

.tag2 {
    background-color: #FFBE2129;
    border: 1px solid #FFBE21;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: #FFBE21;
    padding: 2px 5px;
}

.tag3 {
    background-color: #54d2d029;
    border: 1px solid #54d2d0;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: #54d2d0;
    padding: 2px 5px;
}

.receive1 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    overflow: hidden;
    height: inherit;
}

.receive2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}

.receive3 {
    font-size: 13px;
    width: 100%;
    border-spacing: 0;
    padding: 0 20px;
}

.receive4 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.receive5 {
    color: black;
    font-weight: 600;
    padding-bottom: 10px;
}

.receive6 {
    color: #6689ff;
    font-size: 13px;
}</style>